<template>
  <div class="day1">
    <div type="primary" class="btn" @click="isTrue = !isTrue">烟花来喽！</div>
    <div class="bg-rotate">
      <div class="father" :class="{ shrink: isTrue }" ref="father">
        <div class="item" v-for="item in 16" :key="item"
          :style="`background-position:${-(item-1)%4 * 125}px ${-Math.floor((item-1)/4) * 125}px`"></div>
      </div>
    </div>
  </div>

  <div class="tips">
    <div>1、拆分图片，是通过backgroundPosition来控制显示出来的部分</div>
    <div>2、后期挂载的dom无法被单文件里的style选择到，注意不要加scoped</div>
    <div>3、按键按下 会添加伪类active 通过y轴移动box-shadow的y方向距离 可提供按压感</div>
    <div>4、每个块的右/下 两条边看着是东西，实则为absolute 不占据文档流，调整宽度时 压缩空间被主块遮盖</div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
const isTrue = ref(false)
const father = ref(null)//选中dom

// function setItems() {
//   for (let i = 0; i < 4; i++) {
//     for (let j = 0; j < 4; j++) {
//       let box = document.createElement('div')
//       box.classList.add('item')
//       box.style.backgroundPosition = `${-j * 125}px ${-i * 125}px`
//       father.value.appendChild(box)
//     }
//   }
// }
// onMounted(() => {
//   setItems()
// })
</script>

<style lang="scss">
.day1 {
  padding: 70px 20px 20px;

  .btn {
    margin-left: 221px;
    font-size: 16px;
    width: fit-content;
    padding: 5px 9px;
    background-color: #f6a1a1;
    border-radius: 9px;
    color: #fff;
    cursor: pointer;
    //----------x----y--blur
    box-shadow: 4px 5px 2px rgb(235 175 142 / 65%);

    &:active {
      box-shadow: none;
      transform: translateX(4px) translateY(5px);
    }
  }

  .bg-rotate {
    width: 100%;
    margin: 37px 0;
    display: flex;
    justify-content: center;
    align-items: center;

    .father {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
      width: 600px;
      height: 600px;
      transition: 1s ease;

      &.shrink {
        height: 500px;
        width: 500px;

        .item {
          transform: rotateZ(360deg);
        }
      }

      // 由于item是dom加载完毕后 又重新创建挂载的 如果加scoped 会导致css属性选择器找不到新挂载的item（编译时template里的东西会自动加上统一dom属性）
      .item {
        background-image: url('@/assets/xiaogong.jpg');
        background-repeat: no-repeat;
        background-size: 500px 500px;
        height: 125px;
        width: 125px;
        position: relative;
        transition: 1s ease;

        &::before {
          content: '';
          background-color: #704641;
          position: absolute;
          bottom: -15px;
          left: 8px;
          height: 15px;
          width: 100%;
          transform: skewX(45deg);
        }

        &::after {
          content: '';
          background-color: #2d3853;
          position: absolute;
          top: 8px;
          right: -15px;
          height: 100%;
          width: 15px;
          transform: skewY(45deg);
        }
      }
    }
  }
}
</style>
